(function() {
    let url = decodeURI(location.search).slice(1).split('&');
    let newUrl = {};
    url.forEach(item => {
        let key = item.split('=')[0];
        let value = item.split('=')[1];
        newUrl[key] = value;
    });
    console.log(newUrl);

    //面包屑
    let position = `
    <a href="../html/index.html">首页</a> > <a href="../html/category.html">全部分类</a> > <a href="#">${newUrl.title}</a> >
    `;

    $('.position').html(position);
    let pageNumber = 0;
    //遍历页码,并渲染
    let option = '';
    for (let index = 0; index < 3; index++) {
        option += `
        <option value="${index}">${index+1}</option>
        `
    };
    $('#number').html(option);
    //事件函数
    $('#prev').on('click', function() {
        pageNumber--;
        $('#number')[0].value = pageNumber;
        isRequest(pageNumber);
    });
    $('#next').on('click', function() {
        pageNumber++;
        $('#number')[0].value = pageNumber;
        isRequest(pageNumber)
    });
    $('#number').on('change', function() {
        pageNumber = this.value;
        isRequest(pageNumber)
    });
    //判断是否调用请求
    function isRequest(num) {
        if (num < 1) {
            $('#prev').attr('disabled', true);
            $('#number')[0].value = 0;
        } else if (num > 2) {
            $('#next').attr('disabled', true);
            $('#number')[0].value = 2;
        } else {
            $('#prev').attr('disabled', false)
            $('#next').attr('disabled', false)
            getDate(num);
        }

    }
    //下拉框监听事件
    // 
    getDate(1);

    function getDate(index = 0) {
        index -= 0;
        fetch('http://chst.vip:1234/api/getproductlist?categoryid=' + newUrl.ategoryid + '&pageid=' + index).then(body => body.json()).then(res => {
            let result = res.result;
            // console.log(result);
            let liStr = '';
            result.forEach(item => {
                liStr += `
                    <li date-index="${item.productId}">
                        <a href="#">
                            <div class="img">
                            ${item.productImg}
                            </div>
                            <div class="info">
                                <h3>${item.productName}</h3>
                                <div class="price">${item.productPrice}</div>
                                <div class="other">
                                    <span>${item.productQuote}</span>
                                    <span>${item.productCom}</span>
                                </div>
                            </div>
                        </a>
                    </li>
                    `
            });
            $('.prolis').html(liStr);
        });
    };

    //点击事件
    $('.prolis').on('click', 'li', function() {
        location.href = '../html/productlist.html?categoryid=' + newUrl.ategoryid + '&productid=' + $(this).attr('date-index')
    })
})()